<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f9f1;
      margin: 0;
      padding: 0;
    }

    h2 {
      color: #2d5d2c;
      margin-top: 40px;
      font-size: 28px;
      letter-spacing: 1px;
      text-align: center;
    }

    #pieChartDiv {
        width: 900px;
        height: 600px;
        margin: 40px auto;
        background-color: #ffffff;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 8px 20px rgba(0, 100, 0, 0.08);
    }

    .custom-tooltip {
      background-color: rgba(255, 255, 255, 0.95);
      border: 1px solid #d6ead6;
      border-radius: 8px;
      padding: 10px;
      color: #3a603a;
      font-weight: 500;
    }
  </style>
</head>
<body>
<h2 style="text-align: center;">🌱 联系人分类统计分析</h2>

<div id="pieChartDiv"></div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const categories = [];
  const dataCountByCategory = [[${dataCountByCategory}]];

  // 转换数据格式
  const pieData = [];
  for (let i = 0; i < dataCountByCategory.length; i++) {
      const item = dataCountByCategory[i];
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]]
      categories.push(name);
      pieData.push({
          name: name,
          value: item[key]
      });
  }

  // 初始化 ECharts 实例
  const pieChart = echarts.init(document.getElementById('pieChartDiv'));

  // 清新自然主题配色（柔和的自然色系）
  const naturalColors = ['#88c9a1', '#6dd47e', '#42b983', '#3a9d6b', '#2f805a'];

  // 配置项
  const pieOption = {
      tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderColor: '#d6ead6',
          textStyle: {
              color: '#3a603a'
          },
          formatter: function(params) {
              return `<div style="padding: 12px; border-radius: 6px; background: #fff; border: 1px solid #d6ead6">
                      <div style="margin-bottom: 8px; font-weight: bold">${params.name}</div>
                      <div>数量：<span style="color: #42b983">${params.value}</span></div>
                      <div>占比：<span style="color: #42b983">${params.percent}%</span></div>
                      </div>`;
          }
      },
      legend: {
          orient: 'vertical',
          left: '15%',
          top: 'center',
          data: categories,
          textStyle: {
              color: '#3a603a',
              fontSize: 13
          },
          itemStyle: {
              borderRadius: 4
          }
      },
      series: [{
          name: '联系人分类',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['65%', '55%'],
          data: pieData.map((item, index) => ({
              ...item,
              itemStyle: {
                  color: naturalColors[index % naturalColors.length],
                  borderRadius: 8,
                  borderColor: '#fff',
                  borderWidth: 2
              }
          })),
          emphasis: {
              itemStyle: {
                  shadowBlur: 15,
                  shadowColor: 'rgba(66, 185, 131, 0.5)'
              }
          },
          label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {c}  ({d}%)',
              color: '#3a603a'
          }
      }],
      color: naturalColors
  };

  // 使用配置项
  pieChart.setOption(pieOption);

  // 响应式调整
  window.addEventListener('resize', function() {
    pieChart.resize();
  });
  /*]]>*/
</script>
</body>
</html>